<template>
  <div class="app-container machineContainer">
    <div class="customContainer">
      <div class="details" style="margin:20px 0;color:#7e7e7e;">
        <span class="title">{{storeName}}</span>
        <span class="titlelist">调拨单号：{{orderNo}}-第{{no}}批次</span>
        <span class="titlelist">调入仓：{{storeIn}}</span>
        <span class="titlelist">调出仓：{{storeOut}}</span>
      </div>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label='序号' width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index + 1  + (currentPage - 1) * 20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼品图片" width="80">
          <template slot-scope="scope">
            <div v-viewer="options" class="images fit">
              <img :src="scope.row.thumb" :data-source="scope.row.img" class="image" :key="scope.row.img" />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼品名称" prop="name"></el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="分类" prop="type_name"></el-table-column>
        <el-table-column align="center" label="箱规（个/箱）" prop="box_num"></el-table-column>
        <el-table-column align="center" label="采购价（元）" prop="money_cost"></el-table-column>
        <el-table-column align="center" label="本次入库数量（个）" prop="arrive_num"></el-table-column>
        <el-table-column align="center" label="本次入库金额（元）" prop="arrive_money"></el-table-column>
      </el-table>
    </div>

    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
      <p style="text-align:center;font-size: 14px;color: rgb(96, 98, 102);float:right">
        本次入库数量合计（个）：{{nowNum||0}};本次入库金额合计（元）：{{nowMoney|keepTwoNum}}
      </p>
    </div>
  </div>
</template>

<script>
import { getBatchDetail, getBatchDetailPage } from '@/api/storage_control/giftAllot_form';
export default {
  data() {
    return {
      listLoading: false,
      list: null,
      currentPage: 1,
      totalDataNumber: 0,
      type: null,
      storeName: null, //门店
      storeIn: null, //入仓
      storeOut: null, //出仓
      orderNo: '', //调拨单号
      batch_id: null,
      no: null,
      options: {
        //预览图配置
        toolbar: true,
        url: 'data-source'
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  },
  computed: {
    nowNum() {
      let total = 0;
      this.list &&
        this.list.forEach(val => {
          total += val.arrive_num * 1;
        });
      return total;
    },
    nowMoney() {
      let total = 0;
      this.list &&
        this.list.forEach(val => {
          total += val.arrive_money * 1;
        });
      return total;
    }
  },
  methods: {
    beforeComingIn() {
      if (this.$route.params.routerflag) {
        this.no = this.$route.params.row.no;
        this.batch_id = this.$route.params.row.batch_id;
        this.storeName = this.$route.params.global.store_name;
        this.storeOut = this.$route.params.row.store_out_name;
        this.storeIn = this.$route.params.row.store_in_name;
        this.orderNo = this.$route.params.row.order_no;
        this.type = this.$route.params.row.type;
        this.fetchData();
      } else {
        if (!this.list || this.list.length == 0) {
          this.fetchData();
        }
      }
    },
    // 列表获取
    fetchData() {
      this.currentPage = 1;
      this.listLoading = true;
      getBatchDetailPage({ batch_id: this.batch_id }, this.type)
        .then(response => {
          this.totalDataNumber = response.page * 20;
          getBatchDetail({ batch_id: this.batch_id }, 1, this.type).then(response => {
            response.forEach(val => {
              val.money_cost = (val.money_cost * 1).toFixed(2);
              val.arrive_money = (val.arrive_money * 1).toFixed(2);
            });
            this.list = response;
            this.listLoading = false;
          });
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getBatchDetails({ batch_id: this.batch_id }, val, this.type).then(response => {
        response.forEach(val => {
          val.money_cost = (val.money_cost * 1).toFixed(2);
          val.arrive_money = (val.arrive_money * 1).toFixed(2);
        });
        this.list = response;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title {
  font-size: 20px;
  color: #000;
}
.titlelist {
  font-size: 15px;
  margin: 0 30px;
}
</style>